<template>
	<view>

		<view class="bar flex align-center justify-around">
			<view :class="{active:active==0}" class="item flex align-center column" @click="click(0)">
				<view class="icon">
					<image class="default fill" src="/static/tabbar/home.png"></image>
					<image class="selected fill" src="/static/tabbar/home-active.png"></image>
				</view>
				<view class="text">
					首页
				</view>
			</view>

			<view :class="{active:active==1}" class="item flex align-center column" @click="click(1)">
				<view class="icon">
					<image class="default fill" src="/static/tabbar/cate.png"></image>
					<image class="selected fill" src="/static/tabbar/cate-active.png"></image>
				</view>
				<view class="text">
					茶铺
				</view>
			</view>

			<view :class="{active:active==2}" class="item flex align-center column gwc" @click="click(2)">
				<uni-badge class="uni-badge-left-margin" :text="gwcnum" absolute="rightTop" size="small">
					<view class="icon">
						<image class="default fill" src="/static/tabbar/cart.png"></image>
						<image class="selected fill" src="/static/tabbar/cart-active.png"></image>
					</view>
					<view class="text ">
						购物车
					</view>
				</uni-badge>
			</view>

			<view :class="{active:active==3}" class="item flex align-center column" @click="click(3)">
				<view class="icon">
					<image class="default fill" src="/static/tabbar/user.png"></image>
					<image class="selected fill" src="/static/tabbar/user-active.png"></image>
				</view>
				<view class="text">
					我的
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import store from '@/store'
	export default {
		name: "tab-bar",
		data() {
			return {
				active: 0,
				pages: [
					"/pages/index/index",
					"/pages/category/index",
					"/pages/cart/index",
					"/pages/user/index"
				]
			};
		},
		onShow() {
			uni.hideTabBar({
				animation: false
			})
		},
		mounted() {
			// uni.hideTabBar({
			// 	animation: false
			// })

			this.checkActive()
		},
		computed: {
			gwcnum(){
				return store.state.user.gwcnum;
			}
		},
		watch:{
			open_loginmodel(newval,oldval){
				if(!newval && this.$root.$scope.route == 'pages/order/index'){
					 uni.navigateBack()
					}
			}
		},
		methods: {
			checkActive() {
				// let currentPage = this.helpers.getCurrentPage()
				// if (currentPage) {
				// 	let path = '/' + currentPage.route
				// 	for (let x in this.pages) {
				// 		if (this.pages[x] == path) {
				// 			this.active = x
				// 			uni.$emit('tabChanged', x)
				// 		}
				// 	}
				// }

			},
			click(index) {
				var that = this;
				if (index != 0) {
					uni.hideTabBar({
						animation: false,
						complete() {
							//跳转到对应的页面
							let path = that.pages[index]
							uni.switchTab({
								url: path
							})
							//如果是当前页面，重复点击滚动到头部
							if (that.active == index) {
								uni.pageScrollTo({
									scrollTop: 0,
									duration: 300
								})
							}
						}
					})
				} else {

				}

			}
		}
	}
</script>

<style lang="scss" scoped>
	.bar {
		width: 100%;
		height: 56*2rpx;
		// background: #fefefe;
		background: initial;
		// border-top: 1*2rpx solid #ededed;
		border-top: 0;
		position: fixed;
		left: 0;
		bottom: 45rpx;
		z-index: 5;
		display: flex;
        transition: background-color 0.5s ease; 
		.item {
			flex: 1;
			// width: 25%;

			.icon {
				width: 26*2rpx;
				height: 26*2rpx;

				.selected {
					display: none;
				}
			}

			.text {
				font-weight: 400;
				font-size: 18rpx;
				line-height: 14*2rpx;
				color: #8D9199;
				margin-top: 0rpx;
			}

			&.active {
				.icon {
					.selected {
						display: block;
					}

					.default {
						display: none;
					}
				}

				.text {
					color: #EDF4D9;
				}
			}
		}
	}

	.fill {
		width: 100%;
		height: 100%;
	}

	.flex {
		display: flex;
	}

	.column {
		flex-direction: column;
	}

	.align-center {
		align-items: center;
	}
	.gwc{
		position: relative;
	}
</style>